<template>
  <header>
      <div class="r-cotian">
          <el-button @click="handlemenu" plain icon="el-icon-menu"></el-button>
          <!-- <h3 style="color:#fff">首页</h3> -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="item in tags" :key="item.path" :to="{ path: item.path }">{{item.lable}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="dropdown">
          <el-dropdown trigger="click" szie="mini">
              <span>
                  <img class="users" :src="this.img" alt="">
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
      </div>
  </header>
</template>

<script>
//import {mapState} from 'vuex'
export default {
    name:'Header',
    data () {
        return {
            masgeFromaside:'',
            img:require('../../assets/图片.jpg'),
        }
    },
    methods:{
        handlemenu(){
            return this.$store.commit('CollpseValue')
        }
    },
    computed:{
        //...mapState({
            //tags:state => state.tab.tabsList
        //}),
        
    }
    
}
</script>

<style lang="less" scoped>
header{
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
}
.r-cotian{
    display: flex;
    align-items: center;
    .el-button{
        margin-right: 20px;
    }
}
.dropdown{
    display: flex;
    align-items: center;
    .users{
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
}

</style>